<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./css/style.css" type="text/css">
<link rel="stylesheet" href="./css/calendar.css" type="text/css">
<link rel="stylesheet" href="./css/add_event.css" type="text/css">
<link rel="stylesheet" href="./css/add_calendario.css" type="text/css">
<link rel="stylesheet" href="./css/dateinput.css" type="text/css" >
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.tools.min.js"></script>
<!-- <script type="text/javascript" src="./js/jquery-ui-1.8.21.custom.min"></script> -->
</head>
<body>

{top_bar.php}

<div id="div_center_cal">
	<div id="div_left_cal">
		<div id="div_mini_cal">
			<div id="div_mini_lh_cal">
				<div id="div_mini_lmenu"><span class="calendar-prev" id="pmcal">&laquo;</span><span id="tlmcal">{lmini_tittle}</span>&nbsp;&nbsp;&nbsp;
				</div>
				<div id="div_mini_lcal">{mini_lcal}
				</div>
			</div>

			<div id="div_mini_rh_cal">
				<div id="div_mini_rmenu">&nbsp;&nbsp;&nbsp;<span id="trmcal">{rmini_tittle}</span><span class="calendar-next" id="nmcal">&raquo;</span>
				</div>
				<div id="div_mini_rcal">{mini_rcal}
				</div>
			</div>
		</div>
		<div id="div_tareas" class="div_tareas">{lista_tareas}
		</div>
		<div id="div_menu_calendarios">
			<a id="a_del_calendario" href="index.php?func={FUNC_CAL}&fcal={FCAL_DEL_CALENDARIO}&fdelc={FDELC_MAIN}"></a>
			<a id="a_edit_calendario" href="index.php?func={FUNC_CAL}&fcal={FCAL_EDIT_CALENDARIO}&feditc={FEDITC_MAIN}"></a>
			<a id="a_add_calendario" rel="#overlay_add_calendario" href="index.php?func={FUNC_CAL}&fcal={FCAL_ADD_CALENDARIO}&faddc={FADDC_MAIN}"></a>
<!--			<div id="div_addcalendario" class="div_butt7"></div> -->
<!-- 			<div id="div_editcalendario" class="div_butt7"></div> -->
<!-- 			<div id="div_delcalendario" class="div_butt7"></div> -->
		</div>
		<div class="apple_overlay" id="overlay_add_calendario">
			<div class="contentWrap"></div>
		</div>
		<div id="div_calendarios" class="div_calendarios">{lista_calendarios}
		</div>
	</div>

	<div id="div_right_cal">
		<div id="div_by_day">{task_by_day}
		</div>
		<div id="div_by_time">{task_by_time}
		</div>

		<a id="a_add_event" rel="#add_event_overlay" href="index.php?func={FUNC_CAL}&fcal={FCAL_ADD_EVENT}&fadde={FADDE_MAIN}&ano={ano}&mes={mes}&dia={dia}&hora=08:00">Agregar Evento</a>
		<div class="apple_overlay" id="add_event_overlay">
		<!-- the external content is loaded inside this tag -->
		<div class="contentWrap"></div>
		</div>
	</div>
</div>


</body>
<script type="text/javascript">
var month_names = {month_names};

var D, M, Y, H = 0;

// Crea el overlay agregar calendario
function create_overlay_add_calendario() {
	$("#a_add_calendario").overlay({
			mask: {	color: '#515E6D',loadSpeed: 200, opacity: 0.9
			},
			onBeforeLoad: function() {
				var wrap = this.getOverlay().find(".contentWrap");
				wrap.load( this.getTrigger().attr("href"));
			}
		});
}

// Crea el overlay para el dialogo add_event
function create_overlay_add_event() {
	$("#a_add_event").overlay({
// 			mask: 'darkred',
			mask: {
				color: '#515E6D',
				loadSpeed: 200,
				opacity: 0.9
			},
// 			effect:'apple',
			onBeforeLoad: function() {
				if( H != 0) {
					var href = "index.php?func={FUNC_CAL}&fcal={FCAL_ADD_EVENT}&fadde={FADDE_MAIN}&ano=" + Y + "&mes=" + M + "&dia=" + D + "&hora=" + H;
					var wrap = this.getOverlay().find(".contentWrap").load( href);
				} else {
					var wrap = this.getOverlay().find(".contentWrap").load( this.getTrigger().attr("href"));
				}
			}
		});
}

// Crear evento click en div_by_time
function set_clickevent_weekbytime() {
	$('#div_by_time td').click( function( e) {
			var day = $(this).attr("day");
			var month = $(this).attr("month");
			var year = $(this).attr("year");
			var hour = $(this).attr("hour");

			console.log(day+"/"+month+"/"+year+" "+hour);
 			D = day;
			M = month;
			Y = year;
 			H = hour;
				
			$("#a_add_event").overlay().load();		// Disparar overlay add_event
		});
}

// Crear evento click en div_mini_cal td[day]
function set_clickevent_minical() {
	$('#div_mini_cal td[day]').click( function() {
			var year = $(this).parents("table").attr("year");
			var month =  $(this).parents("table").attr("month");
			var day = $(this).attr("day");
// 			console.log( year + " " + month + " " + day);
			$.post("index.php?func=" + {FUNC_CAL} + "&fcal=" + {FCAL_AJAX}, { fcal_ajax: {CAJAX_PRINT_WEEK_BY_DAY}, year: year, month: month, day: day }, function(data) {
					$('#div_by_day').html(data);
				});

			$.post("index.php?func=" + {FUNC_CAL} + "&fcal=" + {FCAL_AJAX}, { fcal_ajax: {CAJAX_PRINT_WEEK_BY_TIME}, year: year, month: month, day: day }, function(data) {
					$('#div_by_time').html(data);

					set_clickevent_weekbytime();
					set_scroll_weekhbyour();
				});
		});
}

// Establece la poscicion del scroll bar y el alto de las celdas de la tabla
function set_scroll_weekhbyour() { 
	if( $.browser.opera || $.browser.mozilla){
		$("table.week_by_time td.td_mod1, table.week_by_time td.td_mod2, table.week_by_time td.td_mod3, table.week_by_time td.td_mod4").css("height", "9px");
	} 
	$("#div_by_time").scrollTop(36*8);
}

function set_clickevent_prevnext() {
	// Click en prev del mini calendario
	$('#pmcal').click( function() {
			var month = Number( $('#div_mini_lcal table.mini_calendar').attr("month"));
			var year = Number( $('#div_mini_lcal table.mini_calendar').attr("year"));

			var pmonth = month - 1;

			if( pmonth == 0) {
				pmonth = 12;
				pyear = year - 1;
			} else {
				pyear = year;
			}

			$('#tlmcal').html( month_names[ pmonth - 1] + '&nbsp;' + pyear);
			$('#trmcal').html( month_names[ month - 1] + '&nbsp;' + year);

			$.post("index.php?func=" + {FUNC_CAL} + "&fcal=" + {FCAL_AJAX}, { fcal_ajax: {CAJAX_PRINT_MCAL}, year: pyear, month: pmonth}, function(data) {
				$('#div_mini_lcal').html(data);
			});
			
			
			$.post("index.php?func=" + {FUNC_CAL} + "&fcal=" + {FCAL_AJAX}, { fcal_ajax: {CAJAX_PRINT_MCAL}, year: year, month: month }, function(data) {
				$('#div_mini_rcal').html(data);
				set_clickevent_minical();
			});
		});

	// Click en next del mini calendario
	$('#nmcal').click( function() {
			var month =  Number( $('#div_mini_rcal table.mini_calendar').attr("month"));
			var year = Number( $('#div_mini_rcal table.mini_calendar').attr("year"));
			var nmonth = month + 1;
// 				console.log(month);
// 				console.log(nmonth);

			if( nmonth == 13) {
				nmonth = 1;
				nyear = year + 1;
			} else {
				nyear = year;
			}

			$('#tlmcal').html( month_names[ month - 1] + '&nbsp;' + year);
			$('#trmcal').html( month_names[ nmonth - 1] + '&nbsp;' + nyear);

			$.post("index.php?func=" + {FUNC_CAL} + "&fcal=" + {FCAL_AJAX}, { fcal_ajax: {CAJAX_PRINT_MCAL}, year: year, month: month }, function(data) {
				$('#div_mini_lcal').html(data);
			});
			
			$.post("index.php?func=" + {FUNC_CAL} + "&fcal=" + {FCAL_AJAX}, { fcal_ajax: {CAJAX_PRINT_MCAL}, year: nyear, month: nmonth }, function(data) {
				$('#div_mini_rcal').html(data);
				set_clickevent_minical();
			});
		});
}

$(document).ready( function() {
		create_overlay_add_event();
		create_overlay_add_calendario();
		set_clickevent_minical();
		set_clickevent_weekbytime();
		set_clickevent_prevnext();

		set_scroll_weekhbyour();
	});
 
</script>
</html>